import React, { useState, useEffect } from 'react'
import { reqcartlist, reqcartedit, reqcartdelete } from '../../http/api'
import { Toast } from 'antd-mobile'
import "./Shop.less"

export default function Shop(props) {
      const [shopcar, setshopcar] = useState([])
      const [allcheck, setallcheck] = useState(false)
      const [jian, setjian] = useState(true)
  let allprice = shopcar.reduce((val, item) => (item.checked ? val + item.price * item.num : val), 0)

  useEffect(() => {
    let { uid } = JSON.parse(sessionStorage.getItem("info"));
    reqcartlist({ uid }).then((res) => {
      Toast.show(res.data.msg);
      res.data.list[1].content.forEach(item=>(item.checked))
      setshopcar(res.data.list[1].content)
    })
  }, [])

  const add=(id)=> {
    /* 请求 */
    reqcartedit({
      id,
      type: 2,
    }).then(res => {
      if (res.data.code === 200) {
        Toast.show(res.data.msg);
        let arr = shopcar.map(item => (item.checked));
        shopcar.forEach((item, index) => (item.checked = arr[index]));
        /* 刷新页面 */
        let { uid } = JSON.parse(sessionStorage.getItem("info"));
        reqcartlist({
          uid
        }).then(res => {
          if (res.data.code === 200) {
            res.data.list[1].content.forEach((item, index) => (item.checked = arr[index]))
            setshopcar(res.data.list[1].content)
          }
        })
      }
    })
  }
  /* 减 */
 
  const sub=(id,num)=> {
    if (num <= 1) {
      num = 1
      return
  }
  if(jian){
    setjian(false)
    /* 请求 */
    reqcartedit({
      id,
      type: 1,
    }).then(res => {
      if (res.data.code === 200) {
        Toast.show(res.data.msg);
        let arr = shopcar.map(item => (item.checked));
        shopcar.forEach((item, index) => (item.checked = arr[index]));
        /* 刷新页面 */
        let { uid } = JSON.parse(sessionStorage.getItem("info"));
        reqcartlist({
          uid
        }).then(res => {
          if (res.data.code === 200) {
            res.data.list[1].content.forEach((item, index) => (item.checked = arr[index]))
            setshopcar(res.data.list[1].content)
            setjian(true)
          }
        })
      }
    })
  }
 }

  /* 删 */
  const del=(id)=> {
    reqcartdelete({ id }).then(res => {
      if (res.data.code === 200) {
        Toast.show(res.data.msg);
        /* 刷新页面 */
        let arr = shopcar.map(item => (item.checked));
        shopcar.forEach((item, index) => (item.checked = arr[index]));
        let { uid } = JSON.parse(sessionStorage.getItem("info"));
        reqcartlist({ uid }).then((res) => {
          Toast.show(res.data.msg);
          let { uid } = JSON.parse(sessionStorage.getItem("info"));
        reqcartlist({
          uid
        }).then(res => {
          if (res.data.code === 200) {
            res.data.list[1].content.forEach((item, index) => (item.checked = arr[index]))
            setshopcar(res.data.list[1].content)
          }
        })
        })
      }
    })
  }

  /* 全选 */
  const allchecked=(e)=> {
    setallcheck(e)
    shopcar.forEach(item => (item.checked = e))
  }
  /* 单选 */
  const onechange =(e, id)=> {
    shopcar.forEach(item => (item.id === id && (item.checked = e))) /* 加上属性 */
    let arr = shopcar.every(item => item.checked) /* 返回true和flase */
    setallcheck(arr)
  }
  

  return (
    <div className='shop'>
    {shopcar.map((item) => {
      return (
        <div className='oneshop' key={item.id}>
          <div className='check1'><input type="checkbox" checked={item.checked} onChange={(e) => (onechange(e.target.checked, item.id))} /></div>
          <div className='imgbox1'><img src={'http://localhost:1000' + item.img} alt="" /></div>
          <div className='btn1'>
            <p>{item.goodsname}</p>
            <p>{item.price}</p>
            <div className='changenum'>
              <button onClick={() => (add(item.id))}>+</button>
              {item.num}
              <button onClick={() => (sub(item.id,item.num))}>-</button>
              <button onClick={() => (del(item.id))}>删</button>
            </div>
          </div>
        </div>
      )
    })}
    <div className='allprice'>
      <input type="checkbox" checked={allcheck} onChange={(e) => (allchecked(e.target.checked))} />全选
      <div>合计：{allprice}</div>
    </div>
  </div>
  )
}
